<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>

<body>
    <div id="app">
        <textarea name="" id="" cols="30" rows="10" v-model="ipt" @keyup.enter="hanlder"></textarea>
        <button @click="hanlder">按钮</button>
        <div v-for="(item,index) in choose">
            {{item.name}}&nbsp;&nbsp;&nbsp;{{item.count}}
            <button @click="add(index)">点赞</button>
            <button @click="topping(index)">置顶</button>
            <button @click="remove">删除</button>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            ipt: '',
            choose: []
        },
        methods: {
            hanlder() {
                if (this.ipt != '') {
                    let obj = {
                        name: this.ipt,
                        count: 0
                    }
                    this.choose.push(obj)
                    this.ipt = ''
                }
            },
            add(i) {
                this.choose[i].count++;
            },
            remove() {
                this.choose.shift()
            },
            topping(i) {
                this.choose.unshift(this.choose.splice(i, 1)[0])
            }
        },
    })
</script>


</html>